<template>
  <div>
    <h2 :class="[flag ? 'yellow' : 'red']" @click="handle">Hello World</h2>
    <h3 :class="{'green': isGreen}" @mousedown="down" @mouseup="up">宇哥有点帅</h3>
    <h4 :style="{color: state.color}">牛哥也有点帅</h4>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const flag = ref(false)
const handle = () => {
  flag.value = !flag.value
}

const isGreen = ref(false)
const down = () => {
  isGreen.value = true
}
const up = () => {
  isGreen.value = false
}


const state = reactive({
  color: 'blue'
})

</script>

<style lang="css" scoped>
.red{
  color: red;
  transition: all 1.5s;
  background-color: #000;
}
.yellow{
  color: yellow;
  transition: all 1.5s;
  background-color: #000;
}
.green{
  color: green;
}
</style>